// 响应式设计工具类

// 设备类型检测
export const getDeviceType = () => {
  const width = window.innerWidth
  
  if (width < 576) {
    return 'mobile'
  } else if (width >= 576 && width < 768) {
    return 'mobile-large'
  } else if (width >= 768 && width < 992) {
    return 'tablet'
  } else if (width >= 992 && width < 1200) {
    return 'tablet-large'
  } else {
    return 'desktop'
  }
}

// 是否为移动设备
export const isMobile = () => {
  return ['mobile', 'mobile-large'].includes(getDeviceType())
}

// 是否为平板设备
export const isTablet = () => {
  return ['tablet', 'tablet-large'].includes(getDeviceType())
}

// 是否为桌面设备
export const isDesktop = () => {
  return getDeviceType() === 'desktop'
}

// 获取屏幕尺寸信息
export const getScreenInfo = () => {
  return {
    width: window.innerWidth,
    height: window.innerHeight,
    deviceType: getDeviceType(),
    isMobile: isMobile(),
    isTablet: isTablet(),
    isDesktop: isDesktop(),
    pixelRatio: window.devicePixelRatio || 1
  }
}

// 响应式断点
export const breakpoints = {
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
  xxl: 1600
}

// 检查是否匹配断点
export const matchBreakpoint = (breakpoint) => {
  const width = window.innerWidth
  return width >= breakpoints[breakpoint]
}

// 获取适合的列数
export const getGridColumns = () => {
  const deviceType = getDeviceType()
  
  switch (deviceType) {
    case 'mobile':
      return 1
    case 'mobile-large':
      return 2
    case 'tablet':
      return 3
    case 'tablet-large':
      return 4
    case 'desktop':
      return 5
    default:
      return 1
  }
}

// 获取适合的间距
export const getSpacing = () => {
  const deviceType = getDeviceType()
  
  switch (deviceType) {
    case 'mobile':
      return {
        xs: 4,
        sm: 8,
        md: 12,
        lg: 16,
        xl: 20
      }
    case 'mobile-large':
      return {
        xs: 6,
        sm: 12,
        md: 16,
        lg: 20,
        xl: 24
      }
    case 'tablet':
      return {
        xs: 8,
        sm: 16,
        md: 20,
        lg: 24,
        xl: 32
      }
    case 'tablet-large':
      return {
        xs: 10,
        sm: 20,
        md: 24,
        lg: 32,
        xl: 40
      }
    case 'desktop':
      return {
        xs: 12,
        sm: 24,
        md: 32,
        lg: 40,
        xl: 48
      }
    default:
      return {
        xs: 4,
        sm: 8,
        md: 12,
        lg: 16,
        xl: 20
      }
  }
}
